<template>
  <div>
    <ue-el-date-picker v-model="value1" :picker-options="pickerOptions1"></ue-el-date-picker>
    <span v-html="discountText"></span>
    <div></div>
    <ue-el-date-picker v-model="value2" :picker-options="pickerOptions2"></ue-el-date-picker>
    <el-button @click="click">设置折扣</el-button>
  </div>
</template>
<script>
export default{
  data () {
    return {
      value1: null,
      value2: null,
      pickerOptions1: {
        discount: {
          1495468800000: '<span style="display: block;color: red;font-size: 9px;">7折</span>'
        }
      },
      pickerOptions2: {
        discount: {}
      }
    };
  },
  methods: {
    click () {
      this.pickerOptions2.discount[new Date(2017, 5, 23).getTime()] = '<span style="display: block;color: red;font-size: 9px;">9折</span>';
      this.pickerOptions2.discount[new Date(2017, 5, 24).getTime()] = '<span style="display: block;color: red;font-size: 9px;">8折</span>';
      this.pickerOptions2.discount[new Date(2017, 5, 25).getTime()] = '<span style="display: block;color: red;font-size: 9px;">7折</span>';
      this.pickerOptions2.discount[new Date(2017, 5, 26).getTime()] = '<span style="display: block;color: red;font-size: 9px;">6折</span>';
    }
  },
  computed: {
    discountText: function () {
      if (this.value1) {
        return this.pickerOptions1.discount[this.value1.getTime()];
      } else {
        return '';
      }
    }
  }
};
</script>
